<script setup lang="ts">
import { reactive, ref } from 'vue';
const list = ref([
  {id:1,name:"《红楼梦》",acthor:'曹雪芹'},
  {id:2,name:"《三国演义》",acthor:'罗贯中'},
  {id:3,name:"《西游记》",acthor:'吴承恩'},
  {id:4,name:"《水浒传》",acthor:'施耐庵'},
])

const handleDelete = (id:number) => {
  list.value = list.value.filter(item => item.id !== id)
}
const bookInfo = reactive({
  id:0,
  name: '',
  acthor: ''
})
const addBook = () => {
 bookInfo.id = Date.now()
// list.value.push(bookInfo)

// 合并对象 （浅拷贝）： 把一个或多个源对象中的属性复制到目标对象，并返回修改后的目标对象
list.value.push(Object.assign({},bookInfo))
}

</script>


<template>
  <div id="app">
    <h3>黑马书架</h3>
    <div>
      <input type="text" placeholder="请输入书名" v-model="bookInfo.name">
      <input type="text" placeholder="请输入作者" v-model="bookInfo.acthor">
      <button @click="addBook()">添加</button>
      <p>{{ bookInfo }}</p>
    </div>
    <ol>
      <li v-for="(item,index) in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.acthor }}</span>
        <button @click="handleDelete(item.id)">删除</button>">

      </li>
    </ol>
  </div>
 
</template>